<template>
  <div >
    <div>
        <n-card title="文件夹列表" header>
        <div class="header">
            <div>
            <NButton type="primary" @click="onClickAdd">
                添加文件夹
            </NButton>
            </div>
            <div>
            <n-input-group>
                <n-input v-model:value="params.keyword" clearable placeholder="请输入插件关键词" :style="{ width: '100%' }" />
                <n-button @click="List" type="primary" ghost>
                    搜索
                </n-button>
                </n-input-group>
            </div>
        </div>
        </n-card>
        <div class="box" :style="'height:'+innerHeights">
        <!-- 数据表 -->
          <div class="table-box">
              <n-data-table
                  striped 
                  :loading="messageParams.loading"
                  ref="table"
                  :columns="columns"
                  :data="data"
              />
          </div> 
          
        </div>

          <div class="pagination">
                <div>共{{pagination.total}}条数据</div>
                <div>
                <n-pagination
                :page="params.pageNum"
                :page-size="params.pageSize"
                :item-count="pagination.total"
                size="medium"
                show-size-picker
                :page-slot="8"
                :page-sizes="pageSizes"
                :on-update:page="pageNext"
                :on-update:page-size="sizeNext"
                />
                </div>
            </div>
    </div>
 

   <n-modal  v-model:show="showModal"
        :mask-closable="false"
        preset="dialog"
        :title="popTitle"
        positive-text="确认"
        negative-text="算了"
        @positive-click="submitCallback"
        @negative-click="cancelCallback"
      >
      <div class="box-modal">
         <n-form
          ref="formRef"
          :model="formValue"
          :rules="rules"
        >
          <n-form-item label="文件夹名称" path="name">
            <n-input v-model:value="formValue.name" placeholder="请输入文件夹名称" />
          </n-form-item>
          <n-form-item label="文件夹类型" path="type">
            <n-input disabled v-model:value="formValue.type" placeholder="请输入文件夹类型" />
          </n-form-item>
       
        </n-form>
      </div>
  </n-modal>
    
  </div>
</template>

<script setup lang="ts">
import { NAvatar, NButton, NImage, NSwitch, NTag  } from 'naive-ui'
import type { FormInst } from 'naive-ui'
import { nextTick, onMounted, ref } from 'vue'
import { setPagination } from "@/utils"
import api from './api'

const router = useRouter()
const route = useRoute()
const pluginInfo = ref({})
const messageStatus = ref(false)
const innerHeights = ref(0);
onMounted(() => {
  innerHeights.value = String(window.innerHeight - 280)+'px'
    List();
})

const pageSizes = [
  {
    label: '10 每页',
    value: 10
  },
  {
    label: '20 每页',
    value: 20
  },
  {
    label: '30 每页',
    value: 30
  },
  {
    label: '40 每页',
    value: 40
  }
]


const pagination = ref({
  total:10
  
})
const formRef = ref<FormInst | null>(null);

const showModal = ref(false);
const popTitle:any = ref('添加文件夹名称');
const params = ref({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  user_id:''
})

const formValue = ref({
  name:"",
  type:"pc",
  other:'',
  status:'',
})

const rules = {
    name: {
        required: true,
        message: '请输入文件夹名称',
        trigger: 'blur'
    },
    type: {
        required: true,
        message: '请选择类型',
        trigger: 'blur'
    },
    
}

const columns = [
  {
    title: 'ID',
    key: 'id',
    ellipsis: {
      tooltip: true
    }
 
  },
  {
    title: '文件夹名称',
    key: 'name',
    // width: 200,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '其它配置',
    key: 'other',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
    
    
  },
  {
    title: '文件夹分类',
    key: 'type',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
    
  },
  
 
  {
    title: '创建时间',
    key: 'ctime',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '操作',
    key: 'actions',
    width: 360,
    align: 'right',
    fixed: 'right',
    hideInExcel: true,
  
    render(row) {
      return [
        
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            style: 'margin-left: 12px;',
            secondary: true,
            onClick: () => handleOpenRolesSet(row),
          },
          {
            default: () => '编辑',
            icon: () => h('i', { class: 'i-fe:edit' }),
          },
        ),

        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            style: 'margin-left: 12px;',
            onClick: () => handleDelete(row.id),
          },
          {
            default: () => '删除',
            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
          },
        ),
      ]
    },
  },

]

function setPlugsConfigJsonLogo(item){
    try{
        if(item.otherConfigJson){
            const data = JSON.parse(item.otherConfigJson)
            return h(NImage, {
            width: 60,
            src: 'https://q6.itc.cn/q_70/images03/20240319/5567d75589bd46439af8e835beeac44f.png',
        })
        }else{
            return '暂无配置'
        }
    }catch(e){
        if(item.otherConfigJson){
            console.log(item.otherConfigJson)
        }
    }
    
}
function setPlugsConfigJsonBusinessDesc(item){
    try{
        if(item.otherConfigJson){
            const data = JSON.parse(item.otherConfigJson)
            return h('span', { },data.businessDesc)
        }  
        else{
            return '暂无配置'
        }       
    }catch(e){
        if(item.otherConfigJson){
            console.log(item.otherConfigJson)
        }
    }
        
}

function setPlugsConfigJsonT(item,index){
     try{
        if(index == 1){
            if(item.otherConfigJson){
                const data = JSON.parse(item.otherConfigJson)
                return h('span', { },data.theme)
            }  
            else{
                return '暂无配置'
            }
        }else{
            if(item.otherConfigJson){
                const data = JSON.parse(item.otherConfigJson)
                return h('span', { },data.echartTheme)
            }  
            else{
                return '暂无配置'
            }
        }
               
    }catch(e){
        if(item.otherConfigJson){
            console.log(item.otherConfigJson)
        }
    } 
}

function setStatus(item){
    // console.log(item)
    if(item.status)
        return h('span', { style: { color: 'green' } },'启用')
    else
        return h('span', { style: { color: 'red' } },'禁用')
}
const data: any = ref([])

async function handleDelete(id){
  const res: any = await api.filemanage_group_deleteApi({
    id:id
  })
  if(res.code == 200){
    List();
    $message.success('删除成功!')
  }else{
    
  }

}
const messageParams: any = ref({
  show: false,
  status: '403',
  loading: true,
})

const handleOpenRolesSet =(item) =>{
    formValue.value = item;
    popTitle.value = '编辑';
    showModal.value = true;
} 

async function List() {
  try {
    messageParams.value.loading = true
    const res: any = await api.filemanage_group_listApi(params.value)
    if (res.code == 200) {
      messageParams.value.loading = false
    //   pagination.value.total = res.data.total
      data.value = res.data.list
    }
     
  }
  catch (error) {
    console.error(error)
  }
}
function onClickAdd(){
  popTitle.value = '添加文件夹名称'
  showModal.value = true
  formValue.value = {
    name:"",
    type:"pc",
    other:'',
    status:'',
  }
}
async function submitCallback() {
    messageParams.value.loading = true
    formRef.value?.validate((errors) => {
        if (!errors) {
        formValue.value.user_id = route.query.user_id
        if(popTitle.value == '添加文件夹名称')
            AddFun();
        else
            EditFun();
        }
        else {
        showModal.value = true
        return 
    
        }
    })
}

async function AddFun(){
    const newData =  formValue.value
    newData.otherConfigJson = JSON.stringify(formValue.value.otherConfigJson)
    const res: any = await api.filemanage_group_addApi(newData)
    if(res.code == 200){
        List();
        $message.success('添加成功!')
    }else{
        $message.error(res.message)
    }
}

async function EditFun(){
  const res: any = await api.filemanage_group_updateApi(formValue.value)
  if(res.code == 200){
    List();
    $message.success('编辑成功!')
  }else{
    $message.error(res.message)
  }
}

function pageNext(page){
  params.value.pageNum = page
  List();
}
function sizeNext(size){
    params.value.pageNum = 1
    params.value.pageSize = size
    List();
}


function cancelCallback() {
  List();
  showModal.value = false
}

function goTo(path){
    router.push(path)
}

function toStore(item){
    router.push({
      path:'/plugin/goodsPlugin/index',
      query:{
        user_id:route.query.user_id,
        store_id:item.businessId,
      }
    })
    // router.push('/plugin/goodsPlugin/index')
}
</script>

<style scoped>
 .box {
    height: 75vh;
    overflow-y: auto;
}
.table-box{
  padding: 20px;
}
.box-modal{
  width: 400px;
  /* height: 350px; */
  /* overflow-y: auto; */
}
.pagination{
  display: flex;
  justify-content: right;
  /* height: 60px; */
  gap: 10px;
  align-items: center;
  position: relative;
  top: 20px;
  right: 30px;
}
.header{
  display: flex;gap: 10px;
}
.Message{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 200px;
}
</style>
